<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .b {
            width: 500px;
            height: 200px;
            background-color: blue;
            float: left;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }

        img {
            float: left;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            /* height: 50px; */
            background-color: blue;
        }

        .box2::after {
            clear: both;
            content: '';
            display: block;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .left {
            width: 50px;
            height: 50px;
            background-color: chartreuse;
            float: left;
        }

        .right {
            width: 50px;
            height: 50px;
            background-color: coral;
            float: left;
        }
    </style>
</head>

<body>
    <!-- <div class="a"></div>
    <span>云课堂</span> -->
    <!-- <div class="b"></div>
    <div class="b"></div> -->
    <!-- <div class="b"></div>
    <div class="b"></div> -->
    <!-- <img src="https://file.xdclass.net/xdclass/xdclass_logo.png" alt="">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. In vero praesentium libero officia nemo inventore, labore
    officiis expedita eum eveniet fuga distinctio fugit? Accusamus, nisi excepturi. Officiis a ratione vero pariatur,
    est vitae numquam accusamus dolorem quas voluptates unde commodi laborum expedita rem dolorum saepe quisquam
    consequatur deleniti repellendus error ipsum. Incidunt, nihil eum. At, rem? Rerum minus atque, reiciendis vel odio,
    illo dicta modi quos delectus quis doloribus facilis quisquam iusto tempore ut? Illo earum assumenda, blanditiis
    aperiam incidunt doloribus consectetur distinctio impedit libero rerum nam laboriosam reiciendis, dolorem eius
    numquam culpa repellat deserunt! Fuga officiis quo itaque eum magnam similique, praesentium est quam exercitationem
    iste vero dicta maxime illo sequi quas beatae, ipsa incidunt, illum voluptatibus voluptatem. Id soluta accusantium
    doloribus quas doloremque esse, alias, optio tempore sapiente dolor, officiis a aut debitis? Mollitia possimus,
    voluptatem voluptatum perspiciatis fuga et tenetur! Laborum id vero amet qui deleniti officia autem harum voluptatem
    eaque, accusantium vitae modi dolorum ipsam voluptatum culpa animi nesciunt aperiam? Laudantium, soluta expedita a
    ab nostrum quisquam harum aliquid at, veniam nisi voluptates architecto quasi nam nihil! Distinctio voluptatem aut
    non reprehenderit ad corrupti sapiente repudiandae cumque quis id quam, enim, ullam cum nemo aliquam. Recusandae,
    blanditiis? Culpa itaque architecto veritatis est magni reprehenderit autem temporibus odit modi beatae reiciendis,
    laudantium porro nemo tempora consequuntur obcaecati. Aperiam itaque fugiat aspernatur amet consequuntur cumque
    culpa incidunt assumenda veniam quia quidem doloribus atque pariatur quaerat officiis odit voluptatum commodi fuga,
    tenetur nesciunt provident unde fugit harum aut. Voluptatum, numquam dolore. Reiciendis deserunt molestias nobis.
    Labore, officiis accusantium? At optio perspiciatis itaque deserunt impedit, voluptatum odit asperiores delectus aut
    cumque quibusdam pariatur suscipit vel voluptate, quaerat neque ab culpa ducimus fugit iusto quos, numquam iste?
    Nihil nobis illo dolorum pariatur dolor in ratione, quae aut maiores, dolores error ab? -->
    <div class="box1"></div>
    <div class="box2">
        <div class="left">左边盒子</div>
        <div class="right">右边盒子</div>
    </div>
    <div class="box3"></div>

</body>

</html>